import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { NavigationEvents } from 'react-navigation';
import navigationSeevice from '../../../../../../components/navigation/navigationSeevice';
import { style } from '../../../../../../theme/style';
import StorageHelper from '../../../../../../utils/storageHelper';
import { STORAGE_CONSTANT } from '../../../../../../config/storage';
import { GLOBAL } from '../../../../../../config/global';

const scale = GLOBAL.SCALE;
export class GoodsCpt extends Component {
	constructor(props) {
		super(props);
		let { companyId } = props.baseData || {};

		this.state = {
			userId: ''
		}
	}

	async	componentWillMount () {
		const userInfoJson = await StorageHelper.get(STORAGE_CONSTANT.USER_INFO_KEY);
		const userInfo = JSON.parse(userInfoJson);
		this.setState({ userId: userInfo.userId })
	}

	render () {
		let { data, index, length, ifEdit, baseData, refresh, choice } = this.props || {};
		let { staffId, staffName, organName, goodsCateNameList, goodsTreeList, teamNameList } = data || {};
		let { userId } = this.state;
		let teamList = teamNameList && teamNameList.length && teamNameList.map((item) => {
			return item.teamName
		})

		return (
			<View style={[styles.item, index !== (length - 1) ? styles.border : null]}>
				<NavigationEvents
					onWillFocus={({ action }) => {
						refresh && refresh();
					}}
				/>
				<View style={[styles.row, { justifyContent: 'space-between' }]}>
					<Text style={[styles.commonText, styles.bold, { flex: 1 }]}>{staffName}{` ${organName} `}<Text style={{}}>|</Text>{`（${teamList || '无产品组'}）`}</Text>
					{userId == staffId && ifEdit ? <Text style={[styles.commonText, styles.bold, { color: style.color.themeColor }]}
						onPress={() => navigationSeevice.navigate('GoodsDetail', { data, choice })}>管理</Text> : null}
				</View>
				<View style={styles.row} key={index}>
					{
						goodsCateNameList && goodsCateNameList.length ?
							goodsCateNameList.map((item, index) => {
								return (
									<View style={styles.tipTextView} key={index}><Text style={styles.tipText}>{item}</Text></View>
								)
							})
							: null
					}
				</View>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	item: {
		paddingTop: 14 * scale,
		paddingBottom: 6 * scale,
	},
	border: {
		borderBottomWidth: 1 * scale,
		borderBottomColor: '#E3E7F0'
	},
	row: {
		flexDirection: 'row',
		alignItems: 'center',
		flexWrap: 'wrap',
		paddingLeft: 6 * scale,
		paddingBottom: 8 * scale,
	},
	commonText: {
		fontSize: 12 * scale,
		color: '#34475F',
		marginRight: 10 * scale,
		lineHeight: 14 * scale,
	},
	bold: {
		fontWeight: 'bold'
	},
	tipTextView: {
		padding: 8 * scale,
		paddingTop: 4 * scale,
		paddingBottom: 4 * scale,
		marginRight: 10 * scale,
		marginTop: 6 * scale,
		backgroundColor: style.color.bgGray,
		borderRadius: 8 * scale,
	},
	tipText: {
		fontSize: 10 * scale,
		color: '#34475F',
	},
	back: {
		width: 375 * scale,
		backgroundColor: 'rgba(0, 0, 0, .3)',
		height: GLOBAL.SCREEN_HEIGHT,
	},
	bg: {
		width: 375 * scale,
		height: '20%',
	},
})